import { createApp } from 'vue'

import App from './App.vue'
import router from './router'
// element
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn';
// axios
import axios from 'axios'
import VueAxios from 'vue-axios'
// 加载样式
import './assets/css/common.css'
// 添加请求拦截器
axios.interceptors.request.use(config => {
	config.headers.token = window.sessionStorage.getItem('token');
	return config
})

const app = createApp(App)
app.use(router)
app.use(ElementPlus,{locale})
app.use(VueAxios, axios)
app.mount('#app')


// 定义组件能换个文件夹么 - 学习用的 study
app.component('name',{
	props: ['name'],
	template: `
	<b><i>{{name}}赫，<slot></slot></i></b>
	`
})


// 批量载入
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
	// 其组件目录的相对路径
	'./components/label',
	// 是否查询其子目录
	false,
	// 匹配基础组件文件名的正则表达式
	/[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
	// 获取组件配置
	const componentConfig = requireComponent(fileName)

	// 获取组件的 PascalCase 命名
	const componentName = upperFirst(
		camelCase(
			// 获取和目录深度无关的文件名
			fileName
				.split('/')
				.pop()
				.replace(/\.\w+$/, '')
		)
	)
 // 全局注册组件
	app.component(
		componentName,
		// 如果这个组件选项是通过 `export default` 导出的，
		// 那么就会优先使用 `.default`，
		// 否则回退到使用模块的根。
		componentConfig.default || componentConfig
	)
})